<script lang="jsx" setup>
import { ref } from 'vue';

const props = defineProps({
  rowData: {
    type: Object,
    default: () => null
  }
});

const col = ref(0);

const formRef = ref(null);
const formList = ref([
  {
    type: 'tabs',
    name: '基本信息',
    span: 24
  },
  {
    type: 'input',
    key: 'itemProcess',
    label: '点检流程',
    placeholder: '请输入点检流程',
    span: 24
  },
  {
    type: 'input',
    key: 'itemName',
    label: '点检项目',
    placeholder: '请输入点检项目',
    span: 24,
    rule: {
      required: true,
      message: '请输入点检项目',
      trigger: 'change'
    }
  },
  {
    type: 'input',
    key: 'itemStardard',
    label: '标准',
    placeholder: '请输入标准',
    span: 24,
    rule: {
      required: true,
      message: '请输入标准',
      trigger: 'change'
    }
  },
  {
    type: 'input',
    key: 'itemFrequence',
    label: '频率',
    placeholder: '请输入频率',
    span: 24,
    rule: {
      required: true,
      message: '请输入频率',
      trigger: 'change'
    }
  },
  {
    type: 'input',
    key: 'showNo',
    label: '顺序编号',
    placeholder: '请输入顺序编号',
    span: 24,
    rule: {
      required: true,
      message: '请输入顺序编号',
      trigger: 'change'
    }
  },
  {
    type: 'select',
    key: 'needFill',
    label: '是否检验',
    placeholder: '请选择是否检验',
    span: 24,
    rule: {
      required: true,
      message: '请选择是否检验',
      trigger: 'change'
    },
    selectOptions: [
      {
        label: '是',
        value: '1'
      },
      {
        label: '否',
        value: '0'
      }
    ],
    change(val) {
      if (val === '1') {
        col.value = 24;
      } else {
        model.value.checkRange = null;
        col.value = 0;
      }
    }
  },
  {
    type: 'input',
    key: 'checkRange',
    label: '检查范围',
    placeholder: '请输入检查范围',
    span: col,
    rule: {
      required: true,
      message: '请输入检查范围',
      trigger: 'change'
    }
  },
  {
    type: 'radio',
    key: 'delFlag',
    label: '状态',
    span: 24,
    value: '0',
    selectOptions: [
      {
        label: '启用',
        value: '0'
      },
      {
        label: '禁用',
        value: '1'
      }
    ]
  }
]);

const model = ref({ ...getModel() });

function getModel() {
  const data = {};
  formList.value.forEach(item => {
    if (item.key) {
      data[item.key] = props.rowData?.[item.key] || item.value || null;
    }
  });
  if (props.rowData) {
    if (props.rowData.needFill === '1') {
      col.value = 24;
    } else {
      col.value = 0;
    }
  }

  return data;
}

async function validateForm() {
  await formRef.value.validateForm();
}

defineExpose({
  model: model.value,
  validateForm
});
</script>

<template>
  <Form ref="formRef" v-model:model="model" :form-list="formList"></Form>
</template>

<style lang="scss" scoped></style>
